<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>加载 REST 图层示例 - ArcGIS API 4.26</title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css">
    <style>
        html, body, #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
        #layerToggle {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 99;
            background-color: white;
            border-radius: 8px;
            padding: 10px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
    </style>

    <script src="https://js.arcgis.com/4.26/"></script>

    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/MapImageLayer",
            "esri/layers/FeatureLayer",
            "esri/widgets/LayerList",
            "esri/widgets/BasemapToggle",
            "esri/widgets/BasemapGallery"
        ], function(
            Map,
            MapView,
            MapImageLayer,
            FeatureLayer,
            LayerList,
            BasemapToggle,
            BasemapGallery
        ) {
            // 创建地图实例
            const map = new Map({
                basemap: "topo-vector"
            });

            // 创建地图视图
            const view = new MapView({
                container: "viewDiv",
                map: map,
                center: [116.397428, 39.90923], // 北京市中心
                zoom: 4
            });

            // 创建动态地图服务图层（MapImageLayer）
            const mapImageLayer = new MapImageLayer({
                url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
                title: "USA Map Service",
                opacity: 0.7
            });

            // 创建要素图层（FeatureLayer）
            const featureLayer = new FeatureLayer({
                url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0",
                title: "USA Cities",
                outFields: ["*"]
            });

            // 添加图层到地图
            map.add(mapImageLayer);
            map.add(featureLayer);

            // // 添加图层列表部件
            // const layerList = new LayerList({
            //     view: view
            // });
            // view.ui.add(layerList, "top-right");

            // 添加底图切换部件
            const basemapToggle = new BasemapToggle({
                view: view,
                nextBasemap: "satellite"
            });
            view.ui.add(basemapToggle, "bottom-right");

            // 添加底图库部件
            const basemapGallery = new BasemapGallery({
                view: view,
                container: document.createElement("div")
            });
            view.ui.add(basemapGallery, "top-right");

            // 为图层添加弹出窗口模板
            featureLayer.popupTemplate = {
                title: "{CITY_NAME}",
                content: [
                    {
                        type: "fields",
                        fieldInfos: [
                            {
                                fieldName: "POP2000",
                                label: "人口 (2000)",
                                format: {
                                    digitSeparator: true
                                }
                            },
                            {
                                fieldName: "STATE_NAME",
                                label: "州名"
                            }
                        ]
                    }
                ]
            };

            // 添加加载完成事件监听
            view.when(() => {
                console.log("地图加载完成");
            });
        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
</body>
</html> 